<template>
    <div :class="clas1" id="body1">
        <div :class="f1" ref="movingDiv"></div>
    </div>
    <button @click="changeStyle">动态样式</button>
    <button @click="logout">退出登录</button>
</template>

<script>
import { useRouter } from 'vue-router'
import { ref, onMounted, onUnmounted } from 'vue'

export default {
    name: 'DataBind',

    data() {
        return {
            clas1: '',
            f1: '',
            myDiv: {
                backgroundColor: 'green',
                width: '500px',
                height: '500px'
            },
            div2: {
                backgroundColor: 'red',
                width: '100px',
                height: '100px'
            },
            pink: 'pink',
            width: '100%',
            height: '200px'
        }
    },

    computed: {
        router() {
            return useRouter()
        }
    },

    setup() {
        const movingDiv = ref(null)
        let animationInterval = null

        const moveRandomly = () => {
            if (movingDiv.value && movingDiv.value.parentElement) {
                const parent = movingDiv.value.parentElement
                const parentRect = parent.getBoundingClientRect()
                const divRect = movingDiv.value.getBoundingClientRect()

                const maxX = parentRect.width - divRect.width
                const maxY = parentRect.height - divRect.height

                const randomX = Math.floor(Math.random() * maxX)
                const randomY = Math.floor(Math.random() * maxY)

                movingDiv.value.style.left = `${randomX}px`
                movingDiv.value.style.top = `${randomY}px`
            }
        }

        onMounted(() => {
            animationInterval = setInterval(moveRandomly, 1000)
        })

        onUnmounted(() => {
            clearInterval(animationInterval)
        })

        return {
            movingDiv
        }
    },

    methods: {
        changeStyle() {
            this.clas1 = 'clas1'
            this.f1 = 'f1'
        },
        logout() {
            sessionStorage.setItem('showLogin', '1')
            this.$router.push('/LoginDoubao')
        },
        changeRB() {
            this.myDiv.backgroundColor = 'red'
            this.myDiv.width = '1000px'
            this.myDiv.height = '600px'
            this.div2.backgroundColor = '#000'
            this.div2.width = '200px'
            this.div2.height = '300px'
            this.div2["border-radius"] = '200px'
        },
    }
}
</script>

<style scoped>
.body1 {}

#body1 {}

.clas1 {
    position: relative; 
    background-color: green;
    width: 500px;
    height: 500px;
}

.f1 {
    position: absolute;
    background-color: red;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
}
</style>